<template>
  <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center">
    <span style="color: white;line-height: 70px;font-size: 25px">客户管理</span>
  </div>
  <el-table :data="cutBean.records" style="width: 100%">
    <el-table-column prop="name" label="客户名称"/>
    <el-table-column prop="user" label="负责人"/>
    <el-table-column prop="scope" label="经营范围"/>
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="s">
        <el-button type="danger" @click="dialogShow=true;this.show(s.row)">查看</el-button>
        <el-button type="success" @click="dialogUpdate=true;this.updateClient(s.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--页码-->
  <el-pagination
      v-model:currentPage="cutBean.current"
      v-model:page-size="cutBean.size"
      background
      layout="prev, pager, next, jumper"
      :total="cutBean.total"
      style="margin-top: 30px"
      @current-change="findByItem"
  />

  <div style="display: flex;justify-content: space-around">
    <el-button style="margin-top: 100px" type="success" @click="dialogAdd=true">添加客户</el-button>
    <!--查询客户信息信息-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>查询客户信息</span>
          <el-button type="primary" @click="findByItem(1)">查询</el-button>
        </div>
      </template>
      <div class="text item">
        <div>
          客户名称：
          <el-input v-model="findObj.name" placeholder="客户名称"/>
        </div>
        <div style="margin-top: 30px">
          经营范围：
          <el-input  v-model="findObj.scope" placeholder="经营范围"/>
        </div>
      </div>
    </el-card>
  </div>

  <!--添加弹出框-->
  <el-dialog
      v-model="dialogAdd"
      title="添加客户"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">客户名称：
        <el-input class="addIpt" v-model="addObj.name"/>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <el-input class="addIpt" v-model="addObj.user"/>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <el-input class="addIpt" v-model="addObj.phone"/>
      </div>
      <div style="margin-bottom: 30px;">办公地址：
        <el-input class="addIpt" v-model="addObj.address"/>
      </div>
      <div style="margin-bottom: 30px;">邮箱：
        <el-input class="addIpt" v-model="addObj.email"/>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <el-input class="addIpt" v-model="addObj.scope"/>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogAdd = false">取消添加</el-button>
    <el-button type="primary" @click="sureAdd(addObj)">确认添加</el-button>
  </span>
    </template>
  </el-dialog>

  <!--查看弹出框-->
  <el-dialog
      v-model="dialogShow"
      title="客户详细信息"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">客户名称：
        <span>{{showObj.name}}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <span>{{showObj.user}}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <span>{{showObj.phone}}</span>
      </div>
      <div style="margin-bottom: 30px;">办公地址：
        <span>{{showObj.address}}</span>
      </div>
      <div style="margin-bottom: 30px;">邮箱：
        <span>{{showObj.email}}</span>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <span>{{showObj.scope}}</span>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button type="primary" @click="dialogShow = false">确认</el-button>
  </span>
    </template>
  </el-dialog>

  <!--修改弹出框-->
  <el-dialog
      v-model="dialogUpdate"
      title="修改客户"
      width="35%"
      :before-close="handleClose">
    <div>
      <div style="margin-bottom: 30px;">客户名称：
        <span>{{updateObj.name}}</span>
      </div>
      <div style="margin-bottom: 30px;">负责人：
        <el-input style="width: 200px;" v-model="updateObj.user"/>
      </div>
      <div style="margin-bottom: 30px;">负责人电话：
        <el-input style="width: 200px;" v-model="updateObj.phone"/>
      </div>
      <div style="margin-bottom: 30px;">办公地址：
        <span>{{updateObj.address}}</span>
      </div>
      <div style="margin-bottom: 30px;">邮箱：
        <span>{{updateObj.email}}}</span>
      </div>
      <div style="margin-bottom: 30px;">经营范围：
        <el-input style="width: 200px;" v-model="updateObj.scope"/>
      </div>
    </div>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogUpdate = false">取消修改</el-button>
    <el-button type="primary" @click="dialogUpdate = false;this.sureUpdate(this.updateObj)">确认修改</el-button>
  </span>
    </template>
  </el-dialog>

</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      cutBean: {},
      findObj: {},
      showObj:{},
      updateObj:{},
      addObj:{},
      dialogAdd: false,
      dialogShow: false,
      dialogUpdate: false
    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/client/findByItem",{
        params:this.findObj
      }).then(resp=>{
        this.cutBean=resp.data;
      })
    },
    show(obj){
      this.showObj=obj;
    },
    updateClient(obj){
      this.updateObj=obj;
    },
    sureUpdate(obj){
      axios.get("/project/client/update", {
        params: {
          clientId: obj.id,
          person: obj.user,
          phone: obj.phone,
          scope:obj.scope
        }
      }).then(resp => {
        if (resp.data === "ok") {
          this.updateObj = {};
          this.findByItem(1)
        }
      })
    },
    sureAdd(obj){
      axios.get("/project/client/add",{
        params:obj
      }).then(resp => {
        if (resp.data === "ok"){
          this.dialogAdd = false;
          this.addObj = {};
          this.findByItem(1)
        }
      })
    }
  },
  created() {
    this.findByItem(1)
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

.addIpt {
  width: 600px;
}
</style>